<template>
  <view class="container">
    <view class="score">
      <view class="score_left">
        <view class="title">分析结果</view>
        <view class="score_text"><text class="score_num">{{ detail.totalScore }}</text>分</view>
        <view class="score_tag" :style="{ background: levelMap[detail.healthLevel]?.bg }">{{ detail.healthLevel }}</view>
      </view>
      <img class="img" :src="levelMap[detail.healthLevel]?.img" alt="" />
    </view>
    <view v-for="(item) of filterKeys" :key="item">
      <view class="item">
        <view class="title">{{ keyMap[item] }} - {{ detail[item] }}</view>
        <view class="conclusion">
          {{ detail[`${item}Conclusion`] }}
        </view>
      </view>
    </view>
    <view class="footer">
      <button class="confirm_btn" @tap="edit">修改</button>
    </view>
    <view @touchmove.stop.prevent="prevent">
      <up-popup
        :show="showDefecate"
        :closeable="true"
        mode="bottom"
        @close="showDefecate = false"
        :custom-style="{ 'max-height': '98vh', overflow: 'auto' }"
        :round="16"
      >
        <DefacatePopup
          poptype="defecate"
          @onReset="getDetail"
          @onGoit="goit"
          @onSave2="newHealthDateSave"
          @toggleOutPopup="toggleOutPopup"
          ref="defecatePopupRef"
          :defecateDetail="detail"
          :show="showDefecate"
        />
      </up-popup>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import DefacatePopup from './components/defecatePopup.vue'
import { parseTime } from '@/module/utils/tools'
import { onLoad } from '@dcloudio/uni-app'
import { getDefecateById } from '../../api/defecate'
const filterKeys = ['collectTime', 'colorCode', 'shapeCategory', 'defecateFeel']
const keyMap = {
  collectTime: '排便时间',
  colorCode: '排便颜色',
  shapeCategory: '排便形状',
  defecateFeel: '排便感受'
}
const levelMap = {
  非常理想: {
    bg: '#00D1B6',
    img: 'https://ainengli.meilianshuke.com/jkhx/common/nine.png'
  },
  基本正常: {
    bg: '#5C8EFF',
    img: 'https://ainengli.meilianshuke.com/jkhx/common/eight.png'
  },
  轻度异常: {
    bg: '#FF9459',
    img: 'https://ainengli.meilianshuke.com/jkhx/common/five.png'
  },
  明显异常: {
    bg: '#FF7465',
    img: 'https://ainengli.meilianshuke.com/jkhx/common/one.png'
  }
}

const showDefecate = ref(false)
const detail = ref({
  collectTime: parseTime(new Date().getTime(), '{y}-{m}-{d} {h}:{i}'),
  collectTimeConclusion: '排便时间理想，符合肠道的自然排空节律，建议继续保持规律作息。',
  colorCode: 'YELLOW_BROWN',
  colorCodeConclusion: '便便颜色金黄，说明消化和胆汁代谢良好，是非常健康的表现。',
  shapeCategory: 'TYPE_4',
  shapeCategoryConclusion: '偏硬但仍在正常范围，可适当增加水分和膳食纤维摄入。',
  defecateFeel: 'NORMAL',
  defecateFeelConclusion: '排便顺畅无压力，说明肠道蠕动良好，状态非常理想。'
})
const getDetail = () => {
  uni.showLoading({
    title: '加载中'
  })
  getDefecateById({ id: detail.value.id }).then(res => {
    uni.hideLoading()
    showDefecate.value = false
    if (res.code === 0) {
      detail.value = res.data
      detail.value.collectTime = parseTime(detail.value.collectTime, '{y}-{m}-{d} {h}:{i}')
    }
  })
}
onLoad((options) => {
  detail.value.id = options.id
  getDetail()
})

const edit = () => {
  showDefecate.value = true
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  padding: 36rpx 32rpx 220rpx 32rpx;
  background: linear-gradient(to bottom, rgba(166, 250, 239, 0.65), rgba(195, 255, 235, 0.10), rgba(243, 247, 248, 1));
  .score {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .score_left {
      color: #222222;
      .title {
        font-size: 32rpx;
        font-weight: 600;
      }
      .score_text {
        font-size: 28rpx;
        color: #666666;
        .score_num {
          font-size: 64rpx;
          font-weight: 600;
          color: #222222;
          margin-right: 16rpx;
        }
      }
      .score_tag {
        padding: 8rpx 24rpx;
        color: #fff;
        border-radius: 8rpx;
        background: #00D1B6;
        font-size: 24rpx;
        margin-top: 16rpx;
        font-weight: bold;
      }
    }
    .img {
      width: 228rpx;
      height: 228rpx;
    }
  }
  .item {
    background: #fff;
    border-radius: 24rpx;
    padding: 32rpx;
    color: #222;
    margin-top: 32rpx;
    .title {
      font-size: 32rpx;
      font-weight: 600;
      display: flex;
      align-items: center;
      &::before {
        content: '';
        display: inline-block;
        width: 8rpx;
        height: 32rpx;
        margin-right: 16rpx;
        background-color: #00d1b6;
        border-radius: 0 8rpx 8rpx 0;
      }
    }
    .conclusion {
      font-size: 28rpx;
      margin-top: 16rpx;
      line-height: 1.8;
    }
  }
  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 10;
    box-sizing: border-box;
    width: 100%;
    padding: 24rpx 32rpx;
    padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
    background: #fff;

    .confirm_btn {
      width: 100%;
      font-size: 32rpx;
      font-weight: 700;
      color: #fff;
      background: #00d1b6;
      border-radius: 44rpx;
    }
  }
}
</style>
